<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>${setting.siteName} - 主页</title>
    <meta name="keywords" content="${setting.siteName}">
    <meta name="description" content="${setting.siteName}">
    <style type="text/css">
        .ke-container {
            width: 100% !important;
        }
    </style>
    <link href="${base}/resources/css/common-upload.css" rel="stylesheet">
    <!-- BEGIN HEADER -->
    [#include "/admin/include/style.ftl"]
    <!-- END HEADER -->
    <style>
        .ke-container .ke-container-default {
            width: 100% !important;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>新增广告</h5>
                    <div class="ibox-tools">
                        <button type="button" class="btn btn-outline btn-white btn-xs" id="btn-return-loippi"
                                onclick="location.href='list.jhtml'"><i class="fa fa-reply-all"></i> 返回列表
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <form id="inputForm" class="form-horizontal" action="[#--save.jhtml--]"
                          onsubmit="return checkform(this)" method="post">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label"><span class="required"> * </span>广告位置</label>
                                    <div class="col-sm-9">
                                        <select id="position" class="form-control" name="position" maxlength="200">
                                            <option value="1">首页banner</option>
                                            <option value="2">爱仓优选</option>
                                            <option value="3">优品上线</option>
                                            <option value="4">口碑热销</option>
                                            <option value="5">猜你喜欢</option>
                                            <option value="6">新品首发</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label"><span class="required"> * </span>广告标题</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="title" class="form-control" maxlength="200"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label"><span class="required"> * </span>广告图片</label>
                                    <div class="col-sm-9">
                                        <img id="image" src="" class="imgPath"/>
                                        <input type="hidden" name="image" id="imageInput" class="form-control"/>
                                        <input type="file" name="file" id="uploadCut" class="form-control upload"
                                               maxlength="200"/>
                                        <input type="button" id="uploadBtn" class="btn btn-warning uploadBtn"
                                               value="新增图片"/>
                                        <p style="color:red"> 图片规格为375*249</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label"><span class="required"> * </span>开始时间</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="startDate" id="startTime" class="form-control"
                                               maxlength="200" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
                                               readOnly=true/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label"><span class="required"> * </span>结束时间</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="endDate" id="endTime" class="form-control"
                                               maxlength="200" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
                                               readOnly=true/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label"><span class="required"> * </span>排序数字</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="sorts" class="form-control" maxlength="200"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label"><span class="required"> * </span>广告类型</label>
                                    <div class="col-sm-9">
                                        <select id="adType" class="form-control" name="type" maxlength="200">
                                            <option value="1" selected="selected">外部链接</option>
                                            <option value="2">图文详情</option>
                                            <option value="3">商品详情</option>
                                            <option value="4">专题</option>
                                            <option value="5">分类广告</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        [#--分类广告--]
                        <!--/row-->
                        <div class="form-group" id="one_level" style="display: none">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">所有分类</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" id="one_level_input" name="categoryId">

                                            <option value="">请选择</option>
                                            [#list the_first_level as first]
                                                [#if first.parentId == 0]
                                                    <option value="${(first.id)!''}"
                                                            style="font-size: 15px;color: #3b3999;">${(first.name)!''}</option>
                                                    [#list the_second_level as second]
                                                        [#if first.id == second.parentId]
                                                            <option value="${(second.id)!''}">
                                                                &nbsp;&nbsp;&nbsp;&nbsp;${(second.name)!''}</option>
                                                        [/#if]
                                                    [/#list]
                                                [/#if]
                                            [/#list]

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 三种广告类型 -->
                        <div class="form-group" id="urlGroup">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">${message("Ad.url")} </label>
                                    <div class="col-sm-9">
                                        <input type="text" name="url" class="form-control" maxlength="200"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 三种广告类型 -->
                        <div class="form-group" id="columnGroup" style="display:none">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">"专题"</label>
                                    <div class="col-sm-9">
                                        <select type="text" name="columnId" class="form-control">
                                            [#list columnList as col]
                                                <option value="${col.id}">${col.name}</option>
                                            [/#list]
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="itemGroup" style="display:none">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">商品详情</label>
                                    <div class="col-sm-9">
                                        <input type="hidden" name="goodsId" class="form-control" maxlength="200"
                                               id="skuId"/>
                                        <input type="text" id="messageText" class="form-control" maxlength="200"
                                               readOnly=true/>
                                        <label class="label label-primary" id="selectGoods"
                                               data-toggle="modal">选择商品</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="contentGroup" style="display:none">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label class="col-sm-3 control-label">图文详情</label>
                                    <div class="col-sm-9">
                                        <textarea id="editor" name="content" class="editor"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-12 col-sm-offset-10">
                                <button type="button" class="btn btn-default" onclick="window.history.back();">返回
                                </button>
                                <button class="btn btn-success" type="submit">保存内容</button>
                            </div>
                        </div>
                    </form>

                    <!-- 模态框 -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content" style="width:900px">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">选择商品</h4>
                                </div>
                                <div class="modal-body" id="modalBody">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="ibox float-e-margins">
                                                <form id="productlistform"
                                                      action="${base}/admin/ad/findProductListOfModel.jhtml"
                                                      method="get">

                                                    <div class="ibox-content">
                                                        <div class="row">

                                                            <div class="col-sm-12 m-b-xs">
                                                                <div class="col-sm-4 m-b-xs">
                                                                    <select name="filter_stairId"
                                                                            class="input-sm form-control"
                                                                            id="filter_parentId">
                                                                        <option value=''>一级分类</option>
                                                                        [#if json != null]
                                                                        [#list json as item]
                                                                            [#if null == item.parentId || item.parentId == '' || item.parentId == 0]
                                                                                <option value="${item.id}">${item.name}</option>
                                                                            [/#if]
                                                                        [/#list]
                                                                        [/#if]]

                                                                    </select>
                                                                </div>
                                                                <div class="col-sm-4 m-b-xs">
                                                                    <select name="filter_secondLevelId" id="filter_id"
                                                                            class="form-control">
                                                                        <option value=''>二级分类</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="col-sm-4 m-b-xs">
                                                                <input type="text" placeholder="请输入商品名称"
                                                                       id="filter_name" name="filter_namelike"
                                                                       value="${(parameter.namelike)!''}"
                                                                       class="input-sm form-control">
                                                            </div>

                                                            <div class="col-sm-4">
                                                                <div class="input-group">
                                                                    <label class="btn btn-sm btn-primary"
                                                                           onclick="selectProductList(1)"> 搜索</label>&nbsp;
                                                                    <button type="button" onclick="searchM()"
                                                                            class="btn btn-sm btn-info">重置
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="dataTables_wrapper form-inline">
                                                            <table class="table table-striped table-bordered table-hover dataTables-example dataTable">
                                                                <thead>
                                                                <tr>

                                                                    <th></th>
                                                                    <th>商品名称</th>
                                                                    <th>商品分类</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody id="product_tbody">
                                                                </tbody>
                                                            </table>
                                                            <div class="col-md-12 col-sm-12"
                                                                 style="text-align: center;">
                                                                <input type="hidden" id="pageNum" name="pageNumber"
                                                                       value="1"/>
                                                                <a class="btn btn-info" data-totalPage="0"
                                                                   id="pre">上一页</a>
                                                                <i>第<span id="pageNumb">1</span>页</i>
                                                                <a class="btn btn-info" data-totalPage="0"
                                                                   id="next">下一页</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <label class="btn btn-primary submitVal">提交</label>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<!-- BEGIN Script -->
[#include "/admin/include/script.ftl"]
<!-- END Script -->


<script>
    //根据广告类型显示不同的内容
    $("#adType").on("change", function () {
        var value = $(this).val();
        if (value == 1) {
            $("#urlGroup").show();
            $("#contentGroup").hide();
            $("#itemGroup").hide();
            $("#columnGroup").hide();
            $('#one_level').hide();
        } else if (value == 2) {
            $("#urlGroup").hide();
            $("#contentGroup").show();
            $("#itemGroup").hide();
            $("#columnGroup").hide();
            $('#one_level').hide();
        } else if (value == 3) {
            $("#urlGroup").hide();
            $("#contentGroup").hide();
            $("#itemGroup").show();
            $("#columnGroup").hide();
            $('#one_level').hide();
        } else if (value == 4) {
            $("#urlGroup").hide();
            $("#contentGroup").hide();
            $("#itemGroup").hide();
            $("#columnGroup").show();
            $('#one_level').hide();
        } else if (value == 5) {
            $("#urlGroup").hide();
            $("#contentGroup").hide();
            $("#itemGroup").hide();
            $("#columnGroup").hide();
            $('#one_level').show();
        }
    });


    $(document).ready(function () {
        [@flash_message /]
        //var $browserButton = $("#browserButton");
        //$browserButton.browser({input:$("#image")});
        //$(".chosen-select").chosen({width:"100%"});
        //验证开始时间不能小于结束时间
        //$(".input-daterange").datepicker({keyboardNavigation:false,forceParse:false,autoclose:true});
        jQuery("#inputForm").validate({
            rules: {
                title: {
                    required: true
                },
                image: {
                    required: true
                },
                startDate: {
                    required: true,
                },
                endDate: {
                    required: true
                },
                sorts: {
                    required: true,
                    digits: true
                },
                type: {
                    required: true,
                    digits: true
                }
            },
            messages: {},

            submitHandler: function (form) {
                $("#adType").removeAttr("disabled", false)
                $.ajax({
                    url: "${base}/admin/ad/save.jhtml",
                    data: $(form).serialize(),
                    type: "POST",
                    dataType: "json",
                    success: function (resp) {
                        art.message(resp)
                        if ("success" == resp.type) {
                            window.setTimeout(function () {
                                window.location.href = "${base}/admin/ad/list.jhtml";
                            }, 500);
                        }
                    }
                });
            },
            invalidHandler: function (form, validator) {
                return false;
            }
        });
        //广告图片
        $("#image").hide();


    });/* ready */



    <!-- 关闭广告位置推荐类型 -->
    /*      $("#position").on("change", function() {
              var $this = $(this);
              if ("1" != $this.val()) {
                  $("#adType").val(4);
                  $("#adType").attr("disabled", true);
                  $("#urlGroup").hide();
                  $("#contentGroup").hide();
                  $("#itemGroup").hide();
                  $("#columnGroup").show();
              } else {
                  $("#adType").removeAttr("disabled", false)
              }
          });*/


    //广告图片上传
    $('#uploadCut').on('change', function () {
        var formData = new FormData();
        var img_file = document.getElementById("uploadCut");
        var fileObj = img_file.files[0];
        formData.append("file", fileObj);
        formData.append("fileType", "image");
        $.ajax({
            url: '${base}/admin/file/upload.jhtml',
            type: 'POST',
            data: formData,
            async: false,
            processData: false,
            contentType: false,
            success: function (data) {
                data = JSON.parse(data);
                $("#image").show();
                $("#image").css("width", "200px");
                $("#image").css("height", "200px");
                $("#image").attr("src", data.url);
                $("#imageInput").val(data.url);
                $('#uploadBtn').val("重新上传");
                $('#uploadBtn').css("top", "200px");
            }
        });
    });

    //验证开始时间必须小于结束时间
    /* function checkform(obj){
           alert("ddddd");
           var st = obj.startDate.value;
           var et = obj.endDate.value;
           //console.log("st"+st);
           //console.log("et"+et);
           var stdt = new Date(st.replace("-","/"));
           var etdt = new Date(et.replace("-","/"));
           //console.log("st"+stdt);
           //console.log("et"+etdt);
           console.log(stdt.getTime()<etdt.getTime());
           if(stdt.getTime()>etdt.getTime()){
               alert("开始时间必须小于结束时间");
               art.message("开始时间必须小于结束时间");
               return false;
           }else{
               alert("you are right!");
               art.message("you are right");
               return true;
           }
    } */

    /* 广告类型-商品详情-model-起 */
    //点击弹出模态框
    $("#selectGoods").click(function () {
        selectProductList(1);
        $('#myModal').modal('show')
    });

    //模态框重置
    function searchM() {
        $('#filter_parentId').val('');
        $('#filter_id').val('');
        $('#filter_name').val('');
        selectProductList(1);
    }


    //model中的数查询
    function selectProductList(pageNum) {
        $("#pageNum").val(pageNum);
        var data = $("#productlistform").serialize();
        console.log("data.object");
        $.ajax({
            url: "${base}/admin/ad/findProductListOfModel.jhtml",
            type: "POST",
            data: data,
            dataType: "json",
            success: function (result) {
                if (result.object != null) {
                    $("#product_tbody").html("");
                    var html = "";
                    var page = result.object;
                    var item = result.object.content;
                    for (var i in item) {
                        html += '<tr>'
                            + '<td><input type="checkbox" class="i-checks add-checks checkbox" name="ids" value="' + item[i].name + '-' + item[i].id + '"/></td>'
                            + '<td>' + item[i].name + '</td>'
                            + '<td>' + item[i].stairName + '>' + item[i].secondLevelName + '</td>'
                            + '</tr>';
                    }
                    html += "";
                    $("#product_tbody").append(html);
                    $("#pageNum").val(page.pageNumber);
                    $("#pageNumb").text(page.pageNumber);
                    $("#next").attr("data-totalPage", page.totalPages);
                    $("#pre").attr("data-totalPage", page.totalPages);
                }
            }
        });
    }

    /* 下一页点击实现效果 */
    $("#next").on("click", function () {
        var totalPage = $(this).attr("data-totalPage");
        var pageNum = $("#pageNum").val();
        if (parseInt(pageNum) >= parseInt(totalPage)) {
            alert("没有下一页了");
        } else if (totalPage <= 1) {
            alert("没有下一页了");
        } else {
            selectProductList(parseInt(pageNum) + 1);
        }
    });

    /* 上一页点击实现效果 */
    $("#pre").on("click", function () {
        var totalPage = $(this).attr("data-totalPage");
        var pageNum = $("#pageNum").val();
        if (parseInt(pageNum) == 1) {
            alert("没有上一页了");
        } else {
            selectProductList(parseInt(pageNum) - 1);
        }
    });

    //复选框，作单选使用
    $('#product_tbody').on('click', '.checkbox', function () {
        var item = $(this);
        $("input[type='checkbox']").each(function () {
            if (this.checked) {
                $(this).prop({"checked": false})
            }
        })
        item.prop({"checked": true})
        return true;
    });


    //模态框提交，隐藏模态框，输出商品name和id到广告add表单中
    $(".submitVal").click(function () {

        var text
        $("input[type='checkbox']").each(function () {
            if (this.checked) {
                text = $(this).val();
            }
        })
        var skuId = text.split("-")[1];	//商品id
        var html = text.split("-")[0];	//商品名称
        $("#messageText").val(html);
        $("#skuId").val(skuId);
        console.log("skuId" + skuId);
        $('#myModal').modal('hide')
    });


    //模态框二级分类-sfc
    var goods = '${json}';
    var json = JSON.parse(goods);
    var parentId = $('#filter_parentId').val();
    var c_html = '<option value="">二级分类</option>';
    if (parentId != '') {
        $.each(json, function (index, item) {
            if (item.parentId != 0 && item.parentId == parentId) {
                c_html += ('<option value="' + item.id + '"');
                c_html += ('selected="selected"');
                c_html += ('>' + item.name + '</option>');
            }
        })
    }
    $('#filter_id').html(c_html);
    //模态框一级分类值改变事件-sfc
    $('#filter_parentId').change(function () {
        var id = $(this).val();
        $('#filter_id').html('<option value="">二级分类</option>');
        if (id != '') {
            $.each(json, function (index, item) {
                if (item.parentId == id) {
                    $('#filter_id').append('<option value="' + item.id + '">' + item.name + '</option>');
                }
            })
        }
    })


    /* 广告类型-商品详情-止 */

</script>
</body>

</html>
